<!-- 主送、分送、抄送 -->
<template>
	  <van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet"  title="名称">
		<view class="search-add">
		  <van-search
			  v-model="searchValue"
			  show-action
			  :clearable="false"
			  @input="searchListener"
			  placeholder="请输入搜索关键词"
		  >
			<template #action>
			  <van-button  type="info" plain size="small"  @click="onAdd">增加</van-button>
			</template>
		  </van-search>
		</view>
		<view class="content">
		  <!-- <van-contact-card type="add" @click="onAdd" add-text="添加更多单位"/> -->
		  <van-popup class="popup-box"  v-model:show="addMore" closeable round >
			<van-form @submit="onSubmit">
			  <van-cell-group inset>
				<van-field
					v-model="formData.tagId"
					name="tagId"
					label="tagId"
					v-show="false"
				/>
				<van-field
					v-model="formData.content"
					name="名称"
					label="名称"
					placeholder="名称"
					:rules="[{ required: true, message: '请填写名称' }]"
				/>

			  </van-cell-group>
			  <div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">
				  提交
				</van-button>
			  </div>
			</van-form>

		  </van-popup>
		  <van-list v-model="loading" :finished="finished" @load="load">
			<view v-show="emptyData" class="text-center text-gray padding-top-sm">暂无数据</view>
			<van-checkbox-group v-model="result" @change="onChange">
			  <van-cell-group>
				<van-cell v-for="(item, index) in dataArr" clickable :key="index" :title="item.content"
						  @click="toggle(index)">
				  <template #right-icon>
					<van-button  type="warning" plain size="mini"  @click="deleteItem(index)">删除</van-button>
					<van-button  type="info" plain size="mini"  @click="editItem(index)">修改</van-button>
				  </template>
				  <template #icon>
					<van-checkbox class="padding-right-sm" :name="index" ref="checkboxes" />
				  </template>
				</van-cell>
			  </van-cell-group>
			</van-checkbox-group>
		  </van-list>
		  <view class="bottom-btn">
			<van-row type="flex" justify="space-around">
			  <van-col span="10">
				<van-button  type="info" round plain hairline block @click="closeSheet">取消</van-button>
			  </van-col>
			  <van-col span="10">
				<van-button  type="info" round block @click="toSubmit">确定</van-button>
			  </van-col>
			</van-row>
		  </view>

		</view>
	  </van-action-sheet>
</template>

<script>

export default{
  props: {
    forwardState:{
      type: Boolean,
      default: false
    },
    //类型 1主送 3抄送 4分送
    tagType:{
      type:Number,
      default:1
    }
  },
  watch: {
	forwardState(val){
		this.showCompo = val
	},
  },
  data(){
    return{
	  showCompo:false,//组件是否显示
      emptyData:false,
      searchValue:'',
      // tagType:1,
      page:1,
      rows:10,
      formData:{
        tagId:'',
        content:''
      },//填写单位名称
      addMore:false,
      result:[],//多选的下标值
      checked:[],//选中的tagId
      checkedName:[],//选中的tagId对应的content
      dataArr:[],
      dataIndex:'',//数组下标
      loading: false,
      finished: true, //不显示加载中
    }
  },
  mounted() {
    this.getCommonTags()
  },
  methods: {
    //关闭sheet
    closeSheet(){
      console.log("关闭: " + JSON.stringify(this.tagType));
      let checkedData = {tagType:this.tagType,content:this.checkedName.toString(),tagId:this.checked.toString()}
      this.$emit('closeSheet',checkedData)
    },
    //选中的选项:i--数组所在的下标
    toggle(i){
      // console.log("i: " + JSON.stringify(i))
      this.$refs.checkboxes[i].toggle()

      // this.dataIndex = i
      // this.checked.push(this.dataArr[i].tagId)
      // this.checkedName.push(this.dataArr[i].content)


    },
    onChange(item){
      // console.log("item: " + JSON.stringify(item));
      //result: ["04ca78d82672464b86117fe654e42943","1e0faa87e7dc435e97003d474173fbf8"]
      console.log("result: " + JSON.stringify(this.result));//选中的单位id
      if(this.result.length > 0){
        this.checked=[]
        this.checkedName=[]
        this.result.forEach((index,item)=>{
          console.log(index);
          this.checked.push(this.dataArr[index].tagId)
          this.checkedName.push(this.dataArr[index].content)
        })
        // console.log("this.checked: " +this.checkedName.toString());
      }

    },
    searchListener(e){
      this.searchValue=e
      this.getCommonTags()
      console.log("e: " + JSON.stringify(e));
    },
    //删除
    deleteItem(index){
      this.$dialog.confirm({
        title: '系统提示',
        message: '是否确认删除所选单位?',
      })
          .then(() => {
            console.log("this.checked: " + JSON.stringify(this.checked));
            this.deleteByTagId(this.dataArr[index].tagId)
            //
          })
          .catch(() => {
            // on cancel
          });
    },
    //修改-通过下标index从数组拿数据回显
    editItem(index){
      this.addMore = true
      // console.log("this.dataArr[this.dataIndex]: " + JSON.stringify(this.dataArr[index]));
      this.formData = this.dataArr[index]
      // console.log("this.formData: " + JSON.stringify(this.formData));
    },
    //添加更多单位
    onAdd(){
      this.addMore = true
    },
    //确定按钮
    toSubmit(){
      this.closeSheet()
      console.log(": " + JSON.stringify(this.checked));
    },
    //发文修改公文要素时获取主送抄送分送数据
    getCommonTags(){
      console.log("tagType----: " + JSON.stringify(this.tagType));
      var _this = this
      this.dataArr = []
      this.$httploading({
        url: this.$http.adornUrl(`/caac/oa/component/commTags/commtags`),
        method: 'get',
        params: this.$http.adornParams({
          'content': this.searchValue,
          'page': this.page,
          'rows': this.rows,
          'tagType':this.tagType,// 类型 1主送 3抄送 4分送
          'systemKey': this.cache.get("userInfo").systemKey,
          'systemFlag': this.cache.get("userInfo").systemFlag,//固定值
        })
      }).then(({data}) => {
        console.log("获取主送抄送分送数据data: " + JSON.stringify(data));
        if(data.code==200){
          this.dataArr = data.data.rows
          if(this.dataArr.length>0){
            this.emptyData = false
          }else{
            this.emptyData = true
          }
        }
      })
    },
    //删除
    deleteByTagId(tagId){
      var _this = this
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/component/commTags`),
        method: 'delete',
        params: this.$http.adornParams({
          'tagId':tagId,
          'systemKey': this.cache.get("userInfo").systemKey,
          'systemFlag': this.cache.get("userInfo").systemFlag,//固定值
        })
      }).then(({data}) => {
        console.log("删除tagId data: " + JSON.stringify(data));
        if(data.code==200){
          this.$toast(data.data.message)
          this.getCommonTags()//重新获取列表信息
        }else{
          console.log("ERROR==>删除tagId data: " + JSON.stringify(data));
        }
      })
    },
    //增加或修改提交表单
    onSubmit(){
      console.log("this.formData: " + JSON.stringify(this.formData));
      this.addOrUpdateTag()
      this.formData.tagId=''//清空表单数据
      this.formData.content=''
      this.addMore = false //关闭弹框
    },
    //增加或修改
    addOrUpdateTag(){
      var _this = this
      this.$http({
        url: this.$http.adornUrl(`/caac/oa/component/commTags`),
        method: 'post',
        params: this.$http.adornParams({
          // 'tagId':tagId,
          'tagType':this.tagType,
          'content':this.formData.content,
          'id':this.formData.tagId,
          'systemKey': this.cache.get("userInfo").systemKey,
          'systemFlag': this.cache.get("userInfo").systemFlag,//固定值
        })
      }).then(({data}) => {
        console.log("增加或修改 data: " + JSON.stringify(data));
        if(data.code==200){
          this.$toast('操作成功')
          this.getCommonTags()//重新获取列表信息
        }else{
          console.log("ERROR==>增加或修改 data: " + JSON.stringify(data));
        }
      })
    },

  }
}
</script>

<style>
	.van-action-sheet{
	  z-index: 9999;
	  min-height: 80%;
	}
	.search-add{
	  position: fixed;
	  height: 120rpx;
	  width: 100%;
	  z-index: 90;
	}
	.content{
	  margin: 120rpx 0;
	}
	.bottom-btn{
	  background-color: #FFFFFF;
	  padding: 15rpx 0;
	  position: fixed;
	  width: 100%;
	  height: 120rpx;
	  bottom: 0;
	  z-index: 999;
	}
	.popup-box{
	  display: block;
	  width: 100%;
	  height: auto;
	  padding:100rpx 0 20rpx;
	}
	/deep/ .van-cell__title {
	  min-width: 20% !important;
	}
</style>
